
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    {% include 'header_content' %}
    {{  'public.js' | public_assets_content  }}
    <link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_url }}">
    <link rel="stylesheet" type="text/css" href="{{ 'account.css' | public_asset_abs_url }}">
    <link rel="stylesheet" type="text/css" href="{{ 'templates.css' | public_asset_abs_url }}">
    <link rel="stylesheet" type="text/css" href="{{ 'vendor.css' | public_asset_abs_url }}">

    {% include product_option %}
    {% get_script_content route={template_route} scope=0 position=0 %}
</head>
<body class="--body-style">
<div class="popup-product-warp product_quick_detail" id="product_quick_detail">
  <svg class="icon-claer popup-claer" t="1634191042040" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3072" width="20" height="20">
    <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="3073">
    </path>
  </svg>
  {% if theme_config.global.product_quickview_type == "normal" %}
  <div class="product-swiper is-quickview-type">
    <div class="swiper-container" id="popup-swiper-container">
      <ul class="swiper-wrapper">
        {% for image in product.images %}
        <li class="swiper-slide">
          <img style="width: 100%" src="{{image.src | default: '/theme/default/assets/empty.png' }}" alt="{{image.alt}}" />
        </li>
        {% endfor %}
      </ul>
    </div>
    <div class="product-swiper-small">
      <div class="navigation" id='prev_'>
        <svg t="1635160440262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1353" width="24" height="24">
          <path d="M511.609097 961.619254" p-id="1354"></path>
          <path
            d="M360.749204 511.010463 360.749204 511.010463l382.080022-382.074905c14.762215-14.788821 14.762215-38.777165 0-53.585429-14.812357-14.788821-38.799678-14.788821-53.607942 0L283.415908 481.201553c-1.107217 0.867764-2.190899 1.824555-3.206018 2.843768-14.788821 14.808264-14.788821 38.795585 0 53.585429l408.226518 408.230612c14.808264 14.807241 38.795585 14.807241 53.584406 0 14.785751-14.767332 14.785751-38.754652 0-53.562916L360.749204 511.010463 360.749204 511.010463zM360.749204 511.010463"
            p-id="1355"></path>
        </svg>
      </div>
      <div class="swiper-container-small" id="popup-swiper-container-small">
        <ul class="swiper-wrapper">
          {% for image in product.images %}
          <li class="swiper-slide swiper-small-item">
            <img style="width: 100%" src="{{image.src | default: '/theme/default/assets/empty.png' }}" alt="{{image.alt}}" />
          </li>
          {% endfor %}
        </ul>
      </div>
      <div class="navigation" id='next_'>
        <svg t="1635160485836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1486" width="24" height="24">
          <path d="M511.609097 961.619254" p-id="1487"></path>
          <path
            d="M662.268422 511.010463 280.997835 892.299469c-14.785751 14.808264-14.785751 38.796608 0 53.562916 14.788821 14.807241 38.776142 14.807241 53.584406 0l408.226518-408.230612c14.789844-14.790868 14.789844-38.777165 0-53.585429-1.01512-1.020236-2.099824-1.976004-3.206018-2.843768L333.797365 75.350129c-14.808264-14.788821-38.795585-14.788821-53.607942 0-14.762215 14.808264-14.762215 38.796608 0 53.585429L662.268422 511.010463 662.268422 511.010463 662.268422 511.010463zM662.268422 511.010463"
            p-id="1488"></path>
        </svg>
      </div>
    </div>
  </div>
  {% endif %}
  <div class="product-details" id="preview-sku-option">
    {% if theme_config.global.product_quickview_type == "normal" %}
    <div class="product-title is-quickview-type">
      <div class="line-clamp2 general_title-color">{{product.title}}</div>
    </div>
    {% endif %}

    <div class="product-sku">
      <div class="cell-item is-quickview-type" >
        <div class="product-price">
          <span class="product-price-number general_buying-color"></span>
          <span class="product-price-market general_original-color"></span>
        </div>
      </div>
      <div class="sku-cell"></div>
      <div class="cell-item">
        <span class="product-sku-name">{{ lang.cart.list.quantity }}</span>
      </div>
      <div class="cell-item">
        <div class="product-calculator mo-quantity">
          <div class="product-calculator-handle" data-type='reduce'>
                    {% include icon_minus ,{width:'16',height:'16'} %}
          </div>
          <div class="product-calculator-value">1</div>
          <div class="product-calculator-handle" data-type='add'>
                    {% include icon_plus ,{width:'16',height:'16'} %}
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="product-btns">
          {% if product.available == 0 %}
          <div class="mo-btn mo-btn-disable">{{ lang.product.out_of_stock }}</div>
          {% else %}
          <div class="mo-btn  secondary_btn" data-type="cart">{{lang.product.add_to_cart}}</div>
          {% if theme_config.global.product_quickview_type == "normal" %}
          <div class="divider is-quickview-type"></div>
          <div class="is-quickview-type mo-btn main_btn" data-type="buy_now">{{lang.product.buy_it_now}}</div>
          {% endif %}

          {% endif %}
        </div>
      </div>
      {% if theme_config.global.product_quickview_type == "normal" %}
      <div class="cell-item is-quickview-type">
      {% comment %} href="/products/{{option.handle}}" {% endcomment %}
        <a stlye="text-decoration: underline;" class="cart-button cart-button-plan" href="javascript:;" id="view-detail" >{{lang.product.view_detail}}</a>
      </div>
      {% endif %}


    </div>
  </div>
</div>


<script type="text/javascript">
(function(){
  var productInfo = {{product | json}};

  console.log(productInfo)

  const temp = $('#product_quick_detail');
  {% if theme_config.global.product_quickview_type == "normal" %}
  
  function setSmallClass(index) {
    temp.find(".swiper-small-item").eq(index).addClass("swiper-small-item-active").siblings().removeClass("swiper-small-item-active");
  }

  var mySwiper = new Swiper("#popup-swiper-container", {
    autoHeight: true,
    on: {
      init() {
        setSmallClass(0);
      },
      slideChangeTransitionStart() {
        setSmallClass(this.activeIndex);
        mySwiperSmall.slideTo(this.activeIndex);
      }
    }
  });

  var mySwiperSmall = new Swiper("#popup-swiper-container-small", {
    slidesPerView: "auto",
    spaceBetween: 10,
    navigation: {
      nextEl: "#next_",
      prevEl: "#prev_"
    },
    on: {
      tap: function (swiper, event) {
        mySwiperSmall.slideTo(mySwiperSmall.clickedIndex);
        mySwiper.slideTo(mySwiperSmall.clickedIndex);
        setSmallClass(mySwiperSmall.clickedIndex);
      }
    }
  });

  document.addEventListener('DOMContentLoaded', (event) => {
      window.parent.window.quickViewLoad(temp.innerHeight());
      setTimeout(function () {
        window.parent.window.quickViewLoad(temp.innerHeight());
        window.lazyImageShow && lazyImageShow();

      },100)
      const dom = $("#popup-swiper-container-small");
      const li = temp.find(".swiper-container-small li");
      if (dom.innerWidth() < li.length * (li.innerWidth() + 10)) {
        $("#next_").show();
        $("#prev_").show();
      } else {
        $("#next_").hide();
        $("#prev_").hide();
      }
  });
  {% else %}

  document.addEventListener('DOMContentLoaded', (event) => {
      window.parent.window.quickViewLoad(temp.innerHeight());
      setTimeout(function () {
        window.parent.window.quickViewLoad(temp.innerHeight());
        window.lazyImageShow && lazyImageShow();
      },100)
  });

  {% endif %}

 




  const productDetail = new omesaasProduct({
    product: productInfo,
    data_from:'{{ detail_data_from }}',
    ec_currency_code: '{{ base_currency.standard_code }}',
    id: temp.find("#preview-sku-option"),
    changeOption: function (params) {
      if (params.image && params.image.src) {
        const index = productInfo.images.findIndex((el) => el.src === params.image.src);
        {% if theme_config.global.product_quickview_type == "normal" %}
        setSmallClass(index);
        mySwiper.slideTo(index);
        {% endif %}
      }
    }
  });

  //加入购物车
  temp.find("[data-type='cart']").click(function () {
      if (!productDetail.verifyOption("cart")) {
        return false;
      }

      var load = moi.nodeShowLoading(this, "mo-loading-black");
      productDetail.addCart(
        function () {
          load.close();
        },
        function (data) {
          if (!data.code) {
            window.parent.window.quickViewCart(productDetail.params);
          } else {
            return moi.alert({
              title: data.msg
            });
          }
        }
      );
    });
  //直接购买
  temp.find("[data-type='buy_now']").click(function () {
      if (!productDetail.verifyOption("buy")) {
        return false;
      }

      var load = moi.nodeShowLoading(this);

      productDetail.buynow(
        function () {
          load.close();
        },
        function (ret) {
          if (!ret.code) {
            window.parent.window.quickViewBuy(ret.data.checkout_url);
          } else {
            return moi.alert({
              title: ret.msg
            });
          }
        }
      );
    });

  temp.find("#view-detail").click(function(){
    window.parent.window.quickViewDetail('/products/{{product.handle}}');
  })
  
  //取消
  temp.find(".popup-claer").click(function(){
    window.parent.window.quickViewClose();
  })
  moi.quantity({
    dom: temp.find(".mo-quantity"),
    change(val) {
      productDetail.setSelectedVal({ quantity: val.value });
    }
  });

})()
</script>

</body>
</html>
